<template>
  <header class="bg-white shadow-sm">
    <div class="flex items-center justify-between px-6 py-3">
      <div class="flex items-center">
        <h1 class="text-xl font-medium">{{ title }}</h1>
      </div>
      <div class="flex items-center space-x-6">
        <router-link to="/jobs" class="text-gray-600 hover:text-gray-900 text-sm">招聘规范</router-link>
        <router-link to="/communication" class="text-gray-600 hover:text-gray-900 text-sm">我的客服</router-link>
        <router-link to="/resume" class="text-gray-600 hover:text-gray-900 text-sm">面试</router-link>
        <a href="#" class="text-gray-600 hover:text-gray-900 text-sm">招聘数据</a>
        <a href="#" class="text-gray-600 hover:text-gray-900 text-sm">账号权益</a>
        <a href="#" class="text-gray-600 hover:text-gray-900 text-sm">升级VIP</a>
        
        <!-- 用户信息下拉菜单 -->
        <div class="relative group">
          <div class="flex items-center cursor-pointer">
            <span class="text-gray-600 text-sm mr-2">{{ authStore.user?.name }}</span>
            <div class="w-8 h-8 rounded-full bg-gray-200 overflow-hidden">
              <img :src="authStore.user?.avatar" :alt="authStore.user?.name" class="w-full h-full object-cover">
            </div>
            <i class="ri-arrow-down-s-line text-gray-400 ml-1"></i>
          </div>
          
          <!-- 下拉菜单 -->
          <div class="absolute right-0 top-full mt-1 w-48 bg-white rounded-lg shadow-lg border border-gray-100 opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all duration-200 z-50">
            <div class="py-2">
              <div class="px-4 py-2 border-b border-gray-100">
                <div class="text-sm font-medium text-gray-800">{{ authStore.user?.name }}</div>
                <div class="text-xs text-gray-500">{{ authStore.user?.role === 'recruiter' ? '招聘方' : '求职方' }}</div>
              </div>
              <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-50">个人设置</a>
              <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-50">账号管理</a>
              <button 
                @click="handleLogout"
                class="w-full text-left px-4 py-2 text-sm text-red-600 hover:bg-red-50"
              >
                退出登录
              </button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </header>
</template>

<script setup lang="ts">
import { useRouter } from 'vue-router'
import { useAuthStore } from '../stores/auth'

const router = useRouter()
const authStore = useAuthStore()

interface Props {
  title: string
}

defineProps<Props>()

const handleLogout = () => {
  if (confirm('确定要退出登录吗？')) {
    authStore.logout()
    router.push('/login')
  }
}
</script>
